<template>
	<div class="paixu">
		<ul>
			<li @click="dianji(1)">
				<img src="../assets/paixu/paixu.png" alt="" class="a1">
				<p>
					<span>智能排序</span>
					<img src="../assets/paixu/dui.png" alt="" v-if="active==1">
				</p>
			</li>
			<li @click="dianji(2)">
				<img src="../assets/paixu/juli.png" alt="" class="a1">
				<p>
					<span>距离最近</span>
					<img src="../assets/paixu/dui.png" alt="" v-if="active==2"> </p>
			</li>
			<li @click="dianji(3)">
				<img src="../assets/paixu/rexiao.png" alt="" class="a1">
				<p>
					<span>销量最高</span><img src="../assets/paixu/dui.png" v-if="active==3">
				</p>
			</li>
			<li @click="dianji(4)">
				<img src="../assets/paixu/qisongjia.png" alt="" class="a1">
				<p>
					<span>起送价最低</span>
					<img src="../assets/paixu/dui.png" alt="" v-if="active==4"> </p>
			</li>
			<li @click="dianji(5)">
				<img src="../assets/paixu/peisongfei.png" alt="" class="a1">
				<p>
					<span>配送速度最快</span>
					<img src="../assets/paixu/dui.png" alt="" v-if="active==5"> </p>
			</li>
			<li @click="dianji(6)">
				<img src="../assets/paixu/pingfen.png" alt="" class="a1">
				<p style="border: 0;">
					<span>评分最高</span>
					<img src="../assets/paixu/dui.png" alt="" v-if="active==6"> </p>


			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "paixu",
		data() {
			return {
				active: 0,
				state:false,
			}
		},
		methods: {
			dianji(a) {
				this.active = a
			},
		}
	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.paixu {
		width: 100%;
		height: 23rem;
		background: white;
		padding-top: 4rem;
	}

	.paixu ul {
		height: 100%;
	}

	.paixu ul li {
		font-size: 0.9rem;
		height: 3.6rem;
		line-height: 3.4rem;
	}

	.paixu ul li p {
		display: inline-block;
		border-bottom: 1px solid #e4e4e4;
		width: 75%;
		height: 100%;
		margin-left: 1rem;
		position: relative;
	}



	.paixu ul li p img {
		position: absolute;
		right: 0.5rem;
		top: 1rem;
		/* display: none; */
	}

	.a1 {
		width: 1.6rem;
		display: inline-block;
		margin-left: 2rem;
		margin-top: 1.4rem;

	}
</style>
